<!-- 配置图表显示 -->
<template>
    <div class="weatherShow bg-weather-secondary px-12 pt-10 mt-2 rounded">
      <div class="flex gap-6 text-white" v-if="result.length > 0">
        <div class="flex flex-col flex-1 text-center gap-4">
          <span>今天</span>
          <span>{{result[0].date}}</span>
          <span>{{result[0].dayWeather}}</span>
          <span>{{result[0].dayPower}}</span>
        </div>
        <div class="flex flex-col flex-1 text-center gap-4">
          <span>明天</span>
          <span>{{result[1].date}}</span>
          <span>{{result[1].dayWeather}}</span>
          <span>{{result[1].dayPower}}</span>
        </div>
        <div class="flex flex-col flex-1 text-center gap-4">
          <span>{{result[2].week}}</span>
          <span>{{result[2].date}}</span>
          <span>{{result[2].dayWeather}}</span>
          <span>{{result[2].dayPower}}</span>
        </div><!-- 写到要匹配数据 前面数据显示不同步的情况也可以用v-if="result.length > 0" -->
        <div class="flex flex-col flex-1 text-center gap-4">
          <span>{{result[3].week}}</span>
          <span>{{result[3].date}}</span>
          <span>{{result[3].dayWeather}}</span>
          <span>{{result[3].dayPower}}</span>
        </div>
      </div>
      <div class="weathercanvas h-40 mt-10">
    <v-chart :option="option" class="chart"></v-chart>
  </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useAPIStore } from '../store/ApiStore';
import { defineProps } from 'vue';

const props = defineProps({
search: {
  type: String,
  default: '',
},
});

const apiStore = useAPIStore();
let forecastData = ref(null);
let result = ref([]);
const dayTempFloatArray = ref([]);
const nightTempFloatArray = ref([]);

const forecastWeatherData = async () => {
  apiStore.inputValue=props.search
  await apiStore.forecastWeatherData();
  forecastData.value = apiStore.forecastWeather;
  organizeWeatherData(forecastData.value);
  console.log(apiStore.forecastWeather,11319);
};

function organizeWeatherData(data) {
  for (let i = 0; i < data.forecasts.length; i++) {
    const forecast = data.forecasts[i];

    for (let j = 0; j < forecast.casts.length; j++) {
      const cast = forecast.casts[j];

      // 修改文本显示样式
      const item = {
        // 修改日期显示样式
        date: cast.date.substr(5), 
        // 修改星期显示样式
        week: getWeekDay(parseInt(cast.week)), 
        dayWeather: cast.dayweather,
        dayPower: `风力${cast.daypower}级`, 
      };

      result.value.push(item);
      dayTempFloatArray.value.push(parseFloat(cast.daytemp_float));
      nightTempFloatArray.value.push(parseFloat(cast.nighttemp_float));
    }
  }
}

function getWeekDay(week) {
  const weekdays = ['一', '二', '三', '四', '五', '六','日', ];
  return `周${weekdays[week-1]}`;
}

onMounted(forecastWeatherData);

const option = ref({
  xAxis: {
    show: false,
    data: ['Day 1', 'Day 2', 'Day 3', 'Day 4']
  },
  yAxis: {
    show: false
  },
  series: [
    {
      name: 'day',
      type: 'line',
      data: dayTempFloatArray.value,
      itemStyle: {
        normal: {
          width: 3 
        }
      },
      label: {
        show: true, 
        position: 'top', 
        color: '#fff', 
        formatter: '白{c}℃' 
      }
    },
    {
      name: 'night',
      type: 'line',
      data: nightTempFloatArray.value,
      itemStyle: {
        normal: {
          width: 3 
        }
      },
      label: {
        show: true, 
        position: 'bottom', 
        color: '#fff', 
        formatter: '晚{c}℃' 
      }
    }
  ],
  grid: {
    bottom: '0%', 
    left: '0%', 
    right: '0%', 
    top: '15%'
  }
});
</script>

<style scoped>
.chart {
  width: 1103px;
  height: 160px;
}
</style>